/* eslint-disable vue/require-valid-default-prop */
<template>
  <div class="content-wrapper">
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="文件编号">
          <el-input v-model="listQuery.documentCode" type="text" size="mini" />
        </el-form-item>
        <!-- <el-form-item label="是否签收">
          <el-checkbox
            type="text"
            size="mini"
            true-label="1"
            false-label="0"
            v-model="listQuery.signForStatus"
          ></el-checkbox>
        </el-form-item> -->
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            搜索
          </el-button>

          <el-dropdown trigger="click" class="my-dropdown">
            <el-button
              class="filter-item"
              size="small"
              round
              icon="el-icon-printer"
            >
              打印
            </el-button>
            <el-dropdown-menu slot="dropdown" class="user-dropdown">
              <el-dropdown-item
                @click.native.prevent="Printed(1)"
              >打印当页</el-dropdown-item>
              <el-dropdown-item
                @click.native.prevent="Printed(2)"
              >打印全部</el-dropdown-item>
              <!-- <el-dropdown-item @click.native.prevent="termination(row)"
                    >终止流程</el-dropdown-item
                  > -->
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
      </el-form>
      <div class="filter-container" />
      <div>
        <el-table
          v-if="list"
          v-loading="listLoading"
          height="500"
          :data="list"
          highlight-current-row
        >
          <el-table-column
            label="文件类型"
            prop="documentProperty"
            min-width="200"
            sortable
            :formatter="
              (row, column, cellValue, index) => {
                return flowOptions.find((item) => {
                  if (item.key == cellValue) {
                    return item
                  }
                }).value
              }
            "
          />
          <el-table-column
            label="文件名称"
            prop="documentName"
            align="left"
            min-width="300px"
            show-overflow-tooltip
          />
          <el-table-column
            label="文件编号"
            prop="documentCode"
            min-width="220"
          />
          <!-- sortable -->
          <el-table-column
            label="版本号"
            prop="documentVersion"
            align="center"
            width="100px"
          />
          <el-table-column
            label="申请日期"
            prop="createTime"
            align="center"
            width="100px"
          >
            <!-- <template slot-scope="{ row }">
              <el-tag size="mini" v-if="row.signForStatus == 0" type="danger"
                >未签收</el-tag
              >
              <el-tag size="mini" v-else type="success">已签收</el-tag>
            </template> -->
          </el-table-column>
          <el-table-column
            label="申请人员"
            prop="createUserName"
            align="center"
            width="150px"
          />
          <el-table-column
            label="申请类别"
            prop="flowTypeName"
            align="center"
            width="150px"
          />
          <el-table-column
            label="申请原因"
            prop="reason"
            align="center"
            min-width="200px"
          />
          <el-table-column
            label="进展"
            prop="phaseName"
            align="center"
            width="100px"
          />

          <el-table-column
            label="操作"
            align="center"
            width="60px"
            fixed="right"
          >
            <template slot-scope="{ row }">
              <el-dropdown trigger="click" class="filter-item">
                <el-button type="text"><i class="el-icon-more" /></el-button>
                <el-dropdown-menu slot="dropdown" class="user-dropdown">
                  <el-dropdown-item
                    @click.native.prevent="Printed(3, row)"
                  >打印</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page-number.sync="listQuery.pageNumber"
          :page-size.sync="listQuery.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <el-dialog
      title="打印台账"
      :visible.sync="dialogVisible"
      class="mini"
      :before-close="handleClose"
    >
      <!-- ref="dataForm"
        :rules="rules" -->
      <el-form :model="temp" label-position="right" label-width="90px">
        <el-form-item label="记录编号">
          <!-- prop="documentName" -->
          <el-input v-model="temp.documentNumber" size="small" />
        </el-form-item>
        <el-form-item label="页眉">
          <!-- prop="documentName" -->
          <el-input v-model="temp.documentHeader" size="small" />
        </el-form-item>
        <el-form-item label="文件名">
          <!-- prop="documentName" -->
          <el-input v-model="temp.documentName" size="small" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { pageLedger, generate } from '@/api/xd/documentFlow'
import { get, set } from '@/utils/db.js'
import '@/styles/flow.scss'

export default {
  components: { Pagination },
  props: {
    flowOptions: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10
        // flowType: null,
        // documentCode: null
      },
      list: null,
      total: 0,
      listLoading: true,
      input: '',
      dialogVisible: false,
      temp: {
        documentNumber: ''
      }
    }
  },
  mounted() {
    this.getList()
    this.getStandingData()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    //   分页处理
    async getList() {
      this.listLoading = true
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      await pageLedger(this.listQuery)
        .then((response) => {
          this.list = response.data.rows
          this.total = response.data.total
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    handleFilter() {
      pageLedger(this.listQuery).then((response) => {
        this.list = response.data.rows
        this.total = response.data.total
      })
    },
    // edit
    openDocument(id) {
      window.open(
        'onlyoffice/createDocument.html?&token=' +
          this.$store.getters.token +
          '&documentId=' +
          id +
          '&mode=edit' +
          '&urldata=' +
          process.env.VUE_APP_BASE_API
      )
    },
    // 打印
    Printed(type, row) {
      this.dialogVisible = true
      this.temp.type = 0
      this.temp.generateType = 0
      if (type === 1) {
        this.temp.pageSize = this.listQuery.pageSize
        this.temp.pageIndex = this.listQuery.pageIndex
      } else if (type === 2) {
        this.temp.pageSize = 200
      } else if (type === 3) {
        this.temp.flowId = row.documentFlowId
      }
    },
    // 确定
    primary() {
      this.listLoading = true
      if (!this.temp.documentNumber) {
        this.$message.warning('记录编号不可为空')
        return
      }
      if (!this.temp.documentHeader) {
        this.$message.warning('页眉不可为空')
        return
      }
      if (!this.temp.documentName) {
        this.$message.warning('文件名不可为空')
        return
      }
      generate(this.temp)
        .then((res) => {
          this.openDocument(res.data)
          set('flow_standing_data', JSON.stringify(this.temp))
          this.dialogVisible = false
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    examine(row) {
      console.log(row)
    },
    getStandingData() {
      if (JSON.parse(get('flow_standing_data'))) {
        this.temp = JSON.parse(get('flow_standing_data'))
      }
    }
  }
}
</script>

<style scope >
.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* .item{
  color: #000;
	background: rgba(255, 255, 255, 0.279) !important;
	box-shadow: 1px 1px 10px 3px #D3D3D6;
} */
/deep/ .el-dialog__body {
  padding: 0;
}

/deep/ .el-table__row {
  text-align: center;
}

.button {
  margin-top: 20px;
}

.tac {
  text-align: center;
}
</style>
